<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>店铺管理</title>
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" lay-verify="" autocomplete="" placeholder="请输入用户名"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="list" lay-filter="list"></table>
                <script type="text/html" id="tool">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                </script>
            </div>
        </div>
    </div>
    <script src="../layuiadmin/layui/layui.js"></script>
    <script src="../js/main.js"></script>
    <script>
        //Demo
        layui.config({
            base: './layuiadmin/' //静态资源所在路径
        }).use(['layer', 'form', 'table', 'laydate'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form,
                table = layui.table;

            //监听搜索
            form.on('submit(search)', function (data) {
                var field = data.field;
                //执行重载
                table.reload('list', {
                    where: field,
                    page: {
                        curr: 1
                    }
                });
            });

            //触发排序事件 
            table.on('sort(list)', function (obj) {
                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                table.reload('list', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field //排序字段
                        , order: obj.type //排序方式,
                        , userName: $('input[name=userName]').val()
                        , startDate: $('input[name=startDate]').val()
                        , endDate: $('input[name=endDate]').val()
                    }
                });
            });
            table.render({
                elem: '#list'
                , url: '/userList' //数据接口
                , page: true //开启分页
                , sort: true
                , autoSort: false
                , cols: [[
                    { field: 'userID', title: '用户ID', width: 130, sort: true }
                    , { field: 'userName', title: '用户名', width: 150, sort: true }
                    , { field: 'shopCount', title: '店铺数', width: 100 }
                    , { title: '操作', width: 70, align: "center", fixed: "right", toolbar: "#tool" }
                ]]
            });
            table.on('tool(list)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    var userID = data.userID;
                    layer.open({
                        type: 2
                        , title: '用户修改'
                        , content: `userEdit?userID=${userID}`
                        , maxmin: true
                        , area: ['480px', '300px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段
                                $.ajax({
                                    url: `userEdit?userID=${userID}`
                                    , type: 'post'
                                    , data: JSON.stringify(field)
                                    , contentType: "application/json"
                                    , success: function (data) {
                                        if (!data.code) {
                                            layer.msg(data.msg || '已修改', { icon: 6 });
                                            layer.close(index); //关闭弹层
                                        }
                                        else
                                            layer.msg(data.msg, { icon: 5 });
                                    }
                                    , error: function (data) {
                                        layer.msg(data, { icon: 5 });
                                    }
                                });
                            });
                            //提交点击
                            submit.trigger('click');
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>